<!--
 * @Author: error: git config user.name && git config user.email & please set dead value or install git
 * @Date: 2022-09-06 07:45:26
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-09-23 10:10:26
 * @FilePath: \从0到1的楷楷\从0到1的楷楷\pink系列\2第二章\11表单元素.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ms{
            width:600px;
            height: 170px;
        }
    </style>
</head>
<body>
    
    <form action="123" method="POST">
        账号:<input type="text" value="请输入账号"><br>
        <!-- <text>文本框 用户可以在里面输入任何文字 -->
            <!-- size规定了文本框的宽度 -->

            
            <!-- 1.name和balue是每个表单元素都有的属性值,主要给后台人员使用。 -->
            <!-- 2.name表单元素的名字,要求单选和复选框都要有相同的name值 -->
            <!-- 3.value是一个值,是用来给后台反馈数据的 -->
            <!-- 4.value可以不同,name必须相同 -->

        密码:<input type="password" value="" maxlength="8"><br>
        <!-- <password>文本框 用户可以在里面输入看不见的密码 -->
        <!-- maxlength“正整数”,规定输入字段中的字符的最大长度 -->

       性别：<input type="radio" id="text" name="123" value="男 " checked="checked" > <label for="text">男</label>
        <input type="radio" id="mam" name="123" value="女" ><label for="mam">女</label> <br>
        <!-- <radio>单选框 可实现单选和多选 -->
            <!-- 单选按钮和复选框可以设置checked属性,当页面打开的shi -->

            <!-- name是表单单元格的名字,这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->

<!-- <label for="sex">男</label><input type="radio"> name="123" id="sex"/> -->
                              <!-- label标签格式 -->

        爱好：<input type="checkbox" name="aihao" value="吃饭" checked="checked">吃饭
        <input type="checkbox" name="aihao" value="睡觉" >睡觉
        <input type="checkbox" name="aihao" value="打豆豆">打豆豆<br>
        <!--<checkbox> 多选框,可实现多选 -->
            <!-- checked默认选项,规定input元素首次加载时应当被选中 -->

<input type="submit" value="免费注册">
<!-- 点了提交按钮,可以把表单域form里面的表单元 提交给后台服务器 -->
<input type="reset" value="重新填写" />
<!-- reset清除按钮 可以清除表单所有的数据 -->
<input type="button" value="获取短信验证码"> 
<!-- button普通按钮,后期结合 JS 使用 -->
<input type="image" src="" value="">
上传头像：<input type="file">
<!-- file文件按钮,用于上传文件 -->

<fieldset class="ms">
    <legend>字段集标题</legend>

</fieldset>


</form>
</body>
</html>